import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/widgets.dart';
import 'package:cached_network_image/cached_network_image.dart';

class ImagePage extends StatefulWidget {
  const ImagePage({Key? key}) : super(key: key);

  @override
  State<ImagePage> createState() => _ImagePageState();
}

class _ImagePageState extends State<ImagePage> {

  String imageUrl = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1-jj.byteimg.com%2Ftos-cn-i-t2oaga2asx%2Fgold-user-assets%2F2018%2F12%2F29%2F167f8f487ce8255e~tplv-t2oaga2asx-zoom-crop-mark%3A1956%3A1956%3A1956%3A1101.image&refer=http%3A%2F%2Fp1-jj.byteimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655565988&t=679eae2dcaa946c3a885715e30c8ad2d";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text("Image 的使用") ,
        centerTitle: true,
      ),
      // 线性布局
      // 布局水平方向的widget排列方式
      
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // Image 是用加载显示图片
          Image(
            image: NetworkImage(imageUrl),
            width: 100,
            height: 100,
            // BoxFit.fill 大小拉伸
            // BoxFit.cover 宽高比例进行缩放 多出的部分被裁剪
            // 默认 BoxFit.contain
            // BoxFit.fitHeigh / BoxFit.fitWidth 在高/宽度方向 缩放到Image 的height 多出的部分被裁剪
            fit: BoxFit.contain,
            // 对齐方式
            alignment: Alignment.topCenter,
            // 图片的颜色
            color: Color(0x90666666),
            // color 与图片混合模式
            //  BlendMode.srcOver 绘制color 覆盖在图片上
            // BlendMode.src 只绘制 颜色 不会去绘制图片
            // BlendMode.dst 只绘制图片 不会去绘制color 颜色
            //BlendMode.dstIn 绘制color 与图片重叠的部分 color蒙版
            // BlendMode.color 获取黑白图像
            colorBlendMode: BlendMode.color,
            // 图片的重复显示模式
            // ImageRepeat.noRepeat 不重复
            //  ImageRepeat.repeat 重复
            repeat: ImageRepeat.noRepeat,
            ),
            // NetworkImage 效果一样
            Image.network(imageUrl,width: 100,height: 100,),
            // 占位符 过渡图片
            FadeInImage.assetNetwork(placeholder: 'assets/day.png', image: imageUrl,height: 100,width: 100,),
            // AssetImage 加载本地图片
            Image(image: AssetImage("assets/china.png"),height: 100,width: 100,),
            // 裁剪成圆形 或者椭型
            ClipOval(
              child: Container(
                color: Colors.grey,
                child: Image.network(imageUrl,width: 100,height: 100,fit: BoxFit.fill),
              ),
            ),
            CircleAvatar(
              backgroundImage: NetworkImage(imageUrl),
              radius: 40,
            ),
            // 网络图片缓存插件
           // 图片加载完成之前显示的是 placeholder , 加载完成后显示网络图片
              Center(
                child: CachedNetworkImage(
                  height: 100,
                  width: 100,
                  // 加载网络图片过程中显示的内容 , 这里显示进度条
                  placeholder: (context, url)=>CircularProgressIndicator(),
                  // 网络图片地址
                  imageUrl: "https://img-blog.csdnimg.cn/20210324100419204.png",
                ),
              ),

        ],
      ),
      
    );
    
  }
}